<template>
  <div>
    <el-card style="width:100%">
      <p>规格分析</p>
      <div class="right margin-bottom">
        <div class="searchArea flex">
          <el-form ref="serachForm" :model="searchForm" :inline="true">
             <el-form-item label="制造商：">
            <el-select v-model="searchForm.meunName" filterable clearable
                       placeholder="请选择">
              <el-option v-for="item in AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.menuName"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item prop="productCode" label="制造商料号">
              <el-input v-model="searchForm.productCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item prop="cateId" label="主类别:">
                <el-select v-model="searchForm.cateId" filterable placeholder="请选择" clearable @change="setCategoryChild">
                  <el-option
                    v-for="item in categroyList"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
                    ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="cateSonId" label="子类别:">
                <el-select v-model="searchForm.cateSonId" filterable placeholder="请选择" clearable>
                  <el-option
                    v-for="item in searchCate"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

            <el-form-item label="订单时间" prop="timeRange">
              <el-date-picker
                v-model="searchForm.timeRange"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="action">
              <el-button size="medium" type="primary" @click="queryListAct">搜索</el-button>
            </el-form-item>
            <el-form-item prop="action">
              <el-button type="primary" @click="dialogDetailFormVisible=true">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <!-- 表格 -->
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="500" stripe>
          <el-table-column prop="orderNum"
                           label="订单号"
                           align="center"></el-table-column>
          <el-table-column prop="productCode"
                           label="制造商料号"
                           align="center"></el-table-column>
          <el-table-column prop="cateName"
                           label="主类别"
                           align="center"></el-table-column>
          <el-table-column prop="cateSonName"
                           label="子类别"
                           align="center"></el-table-column>
          <el-table-column prop="menuName"
                           label="制造商"
                           align="center"></el-table-column>
          <el-table-column prop="addTime"
                           label="订单时间"
                           align="center"></el-table-column>
          <el-table-column prop="uaccount"
                           label="购买账户"
                           align="center"></el-table-column>
          <el-table-column prop="buyNum"
                          label="购买数量"
                          align="center"></el-table-column>
          <el-table-column prop="sort"
                          label="数据资料"
                          align="center"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageParams.currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageParams.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pageParams.total"></el-pagination>
      </div>
    </el-card>

    <el-dialog title="编辑" :visible.sync="dialogMoldifyFormVisible">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left">
          <el-form-item label="产品族" prop="cateName" style="width:50%">
            <el-input v-model="addForm.cateName" ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort" style="width:50%">
            <el-input v-model="addForm.sort" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogMoldifyFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogMoldifyFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="导出筛选" :visible.sync="dialogDetailFormVisible">
        <el-form :model="downLoadForm">
        <el-form-item label="供应商">
          <el-select v-model="mValue" filterable clearable placeholder="请选择">
            <el-option
              v-for="item in AllSlist"
              :key="item.id"
              :label="item.menuName"
              :value="item.menuName"
              @click.native="searchUser(item.id)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="料号" prop="productCode" style="width:40%;">
          <el-input v-model="downLoadForm.productCode" placeholder="请输入物料编号"></el-input>
        </el-form-item>
         <el-form-item prop="cateId" label="产品族:">
                <el-select v-model="downLoadForm.cateId" filterable placeholder="请选择" clearable @change="setDownloadCategoryChild">
                  <el-option
                    v-for="item in categroyList"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
                    ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="cateSonId" label="系列:">
                <el-select v-model="downLoadForm.cateSonId" filterable placeholder="请选择" clearable>
                  <el-option
                    v-for="item in downLoadCate"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            <el-form-item label="订单时间" prop="timeRange">
              <el-date-picker
                v-model="downLoadForm.timeRange"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadData">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="子类" :visible.sync="dialogChildFormVisible">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left" label-width="120px" class="infos flex">
        <el-form-item label="新增子类" prop="cateName" style="width:50%">
          <el-input v-model="addForm.cateName" placeholder="新增子类"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChildFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogChildFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog title="物料子分类信息"
               :visible.sync="showDetail"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="30%"
               style="text-align: center;">
      <el-form :model="supplierInfo"
               label-position="left"
               label-width="150px"
               style="margin-left:20px">
        <el-form-item label="产品族"
                      prop="cateName"
                      align="left">
          {{supplierInfo.cateName}}
        </el-form-item>
        <el-form-item label="排序"
                      prop="sort"
                      align="left">
          {{supplierInfo.sort}}
        </el-form-item>
        <el-form-item label="添加时间"
                      prop="addTime"
                      align="left">
          {{supplierInfo.addTime}}
        </el-form-item>
        <el-form-item label="是否推荐"
                      prop="isShow"
                      align="left">
          {{supplierInfo.isShow}}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { CATEGORY_LIST,CATEGORY_ADD,SPEC_ANALYSIS,SUPPLIER_ALLLIST ,SPECIFICATION_DOWNLOAD} from "@/utils/api";
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      mValue:null,
      productValue:null,
      searchCate:{},
      downLoadCate:{},
      downloadCateorName:null,
      downloadCateName:null,
      searchCateorName:null,
      searchCateName:null,
      categroyList: [{id:0,cateName:''}],
      categroyChildList:[{id:0,cateName:''}],
       downLoadForm: {
        AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ],
        productCode: "",
        isShow: false,
        cateId: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ],
        timeRange:[]
      },
       AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ],
      searchForm: {
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        cateId:null,
        cateSonId:null,
        aksNum:''
      },
      dialogMoldifyFormVisible: false,
      dialogDetailFormVisible: false,
      dialogChildFormVisible: false,
      addForm: {
        id: '',
      	pid:this.$route.query["data"],
        cateName: '',
        sort: '',
        isShow: '1',
        pic:''
      },
      rules: {
          cateName: [
            { required: true, message: '请输入产品族', trigger: 'blur' },
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur' }
          ],
          isShow: [
            { required: true, message: '请选择是否推荐', trigger: 'blur' }
          ]
        },
      // 查询条件
      searchCondition: {},
      // 表格数据
      tableData: [],
      // 分页参数
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 50
      },
      // 详情弹窗
      supplierInfo: {},
      showDetail: false
    }
  },
  mounted () {
    // 初始化查询
    this.getAllList()
    this.queryListAct()
    this.getCategoryList();
  },
  methods: {
    //供应商
    getAllList () {
      SUPPLIER_ALLLIST().then(res => {
        this.AllSlist = res.data
      })
    },
    getCategoryList() {
      CATEGORY_LIST({}).then(res => {
        this.categroyList = res.data.dataList;
      });
    },
    setDownloadCategoryChild(row){
      this.downloadCateorName=null
      console.log('===>' + row)
      var se;
      for(se of this.categroyList){
         if(se.id==row){
            this.downLoadCate=se.categoryVOList           
         }
      }
    },
    setCategoryChild(row){
      this.searchCateorName=null
      console.log('===>' + row)
      var se;
      for(se of this.categroyList){
         if(se.id==row){
            this.searchCate=se.categoryVOList           
         }
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addSupplier()
        } else {
          alert('error submit!');
          return false;
        }
      });
    },
    addSupplier(){
      CATEGORY_ADD({
      	pid:this.addForm.pid,
        cateName:this.addForm.cateName,
        sort: this.addForm.sort,
        isShow:this.addForm.isShow,
        pic:this.addForm.pic
      }).then(res => {
        this.$message.success(JSON.stringify(res))  
        if(res.status==200){
          this.$message.success('success')  
          this.$router.push({ path: "Materials" })
        }
      });
    },
    //导出
    downLoadData(){
      SPECIFICATION_DOWNLOAD({
        startTime:Math.floor(new Date(this.downLoadForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.downLoadForm.timeRange[1]).getTime()/1000),
        menuName: this.mValue,
        productCode:this.downLoadForm.productCode,
        cateId:this.downLoadForm.cateId,
        catesonId:this.downLoadForm.cateSonId,
      }).then(res => {
        console.log(res.data)
        var url = this.downloadUrl + res.data
        location.href = url
        this.dialogFormVisible = false
      })
    },
    // 新增按钮
    addBtn (row) {
      this.dialogChildFormVisible=true
      // this.$router.push({
      //   path: "MaterialsAdd",
      //   query: {
      //     data: row.pid
      //   }
      // });
    },
    // 修改按钮
    modifyBtn (row) {
      this.dialogMoldifyFormVisible=true
      this.addForm.id = row.id
      this.addForm.pid = row.pid
      this.addForm.cateName = row.cateName
      this.addForm.sort = row.sort
      this.addForm.isShow = row.isShow
      this.addForm.pic = row.pic
      // this.$router.push({
      //   path: "MaterialsModify",
      //   query: {
      //     data: row
      //   }
      // });
    },
    // 详情按钮
    detailBtn (row) {
      this.supplierInfo = row
      this.showDetail = true
    },
    // (启动弹窗)删除
    updateDelete (_scope) {
      this.$confirm('此操作将删除该供应商, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //			DELETEAMLUSER({
        //				userId: _scope.id,
        //			}).then(res => {
        //				this.getManage()
        //			})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 列表查询
    queryListAct () {
      SPEC_ANALYSIS({
        pageNo:this.pageParams.currentPage,
        pageSize:this.pageParams.pageSize,
        productCode:this.searchForm.productCode,
        menuName:this.searchForm.meunName,
        cateId:this.searchForm.cateId,
        cateSonId:this.searchForm.cateSonId,
        startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
      }).then(res => {
        this.tableData = res.data.dataList;
        this.pageParams.total = res.data.count;
        console.log('====>'+this.tableData)
        for (let i in this.tableData) {
          if (this.tableData[i].isShow == 1) {
            this.tableData[i].isShow = '是'
          } else {
            this.tableData[i].isShow = '否'
          }
          this.tableData[i].addTime = this.formatSecond(this.tableData[i].addTime)
        }
      });
    },
    // 改变页尺寸
    handleSizeChange (val) {
      this.pageParams.pageSize = val
      this.queryListAct();
    },
    // 改变页码
    handleCurrentChange (val) {
      this.pageParams.currentPage = val
      this.queryListAct();
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>
<style lang="scss" scoped>

.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}

p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
.searchArea {
  width: 100%;
  margin-top: 15px;
  justify-content: flex-start;
}

</style>